<template>
  <div class="trade-page-wrap">
    <bg-vue>
      <template #imgFixed>
        <img src="@/assets/imgV2/bg-full-one.jpg" />
      </template>
      <template #img>
        <img src="@/assets/imgV2/trade-bg.png" />
      </template>
      <div class="trade-page">
        <div class="info">
          <div class="t">{{ t('home.trade.total') }}</div>
          <div class="v">{{ s.total }}</div>
          <!-- <div class="s">{{ t('home.todayUpdated') }}</div> -->
        </div>
        <div class="info-wrap">
          <div class="info">
            <div class="t">{{ t('home.trade.staticSum') }}</div>
            <div class="v">{{ s.staticSum }}</div>
          </div>
          <div class="info">
            <div class="t">{{ t('home.trade.communitySum') }}</div>
            <div class="v">{{ s.communitySum }}</div>
          </div>
        </div>

        <div class="list" v-if="active == 0">
          <div class="item">
            <div class="t">{{ t('home.JRWK') }}</div>
            <div class="v">{{ s.staticParam.todaySum }} PLAY</div>
          </div>
          <div class="item">
            <div class="t">{{ t('home.SQKW') }}</div>
            <div class="v">{{ s.communityParam.num }} PLAY</div>
          </div>
          <div class="item">
            <div class="t">{{ t('home.JYGM') }}</div>
            <div class="v">{{ s.staticParam.num }} PLAY</div>
          </div>
          <div class="item">
            <div class="t">{{ t('home.WKZL') }}</div>
            <div class="v">{{ minedTotal }} PLAY</div>
          </div>
        </div>

        <div class="list" v-if="active == 1">
          <div class="item">
            <div class="t">累计奖励社区预挖数量</div>
            <div class="v">{{ s.communityParam.rewardNum }} PLAY</div>
          </div>
          <div class="item">
            <div class="t">昨日社区PLAY挖矿数量</div>
            <div class="v">{{ s.communityParam.yesterdaySum }}</div>
          </div>
          <div class="item noBor-bottom">
            <div class="t">社区PLAY挖矿总量</div>
            <div class="v">{{ s.communityParam.total }} PLAY</div>
          </div>
          <!--          <div class="static-btn">-->
          <!--            <div class="static-btn-destroy">社区奖励记录</div>-->
          <!--            <div class="static-btn-detail">挖矿详情</div>-->
          <!--          </div>-->
        </div>
      </div>
    </bg-vue>
  </div>

  <div class="wrap">
    <van-popup class="max-window" v-model:show="show" v-if="!state.active">
      <box-view>
        <div class="mask-content">
          <div class="title-style mask-content-title">{{ t('home.QHDZ') }}</div>
          <div class="title-style mask-content-text">
            <img src="@/assets/img/logos/paylogo.png" alt="" />
            {{ t('home.TJRQB') }}</div
          >
          <div class="warp-input">
            <van-field
              class="vant-input-white"
              v-model="value"
              type="text"
              :border="false"
              :placeholder="t('home.SRDZ')"
            />
          </div>
          <div class="mask-content-tip">
            <div>{{ t('home.tip') }}:</div>
            <div class="tip-down">
              {{ t('home.TC') }}
            </div>
          </div>
          <div class="btn-bottom" @click="onActive">
            <van-button block>{{ t('home.JH') }}</van-button>
          </div>
        </div>
      </box-view>
    </van-popup>
  </div>
</template>
<script>
import { useI18n } from '@/hooks/web/useI18n'
import { ref } from 'vue'
import { connect, state } from '../dapp'
import http from '../http'
import BgVue from '@/components/BgVue.vue'
import BoxView from '@/components/BoxView.vue'
import removeZeros from '@/utils/remove-zeros'
import Big from 'big.js'
export default {
  setup() {
    const show = ref(true)
    // watch(state, (e) => {
    //   show.value = !e.active
    //   console.log('active=', e.active)
    //   if (e.active) {
    //     this.init()
    //   }
    // })
    const showPopup = () => {
      show.value = true
    }
    const { t } = useI18n()
    return {
      show,
      showPopup,
      t,
    }
  },
  data() {
    // console.log(this.$route)
    var addr = ''
    if (this.$route.query.invite) {
      addr = this.$route.query.invite
    }
    return {
      value: addr,
      active: 0,
      s: {
        total: '0',
        staticSum: '0',
        communitySum: '0',
        staticParam: {
          todaySum: '0',
          num: '0',
          total: '0',
        },
        communityParam: {
          rewardNum: '',
          yesterdaySum: '0',
          total: '0',
        },
      },
      state: state,

      // PLAY挖矿总量
      minedTotal: '0',
    }
  },
  mounted() {
    this.init()
    // window.onresize = () => {
    //   return (() => {
    //     this.$refs.tabs.resize()
    //   })()
    // }
  },
  methods: {
    tabs: function (index) {
      this.active = index.currentTarget.dataset.index
    },
    async init() {
      // console.log(state.loaded, state.active)
      if (state.loaded && state.active) {
        const res = await http.get(`/api/home`)
        if (res.code === 200) {
          let d = res.data
          // if (process.env.NODE_ENV !== 'production') {
          //   d = {
          //     communityParam: {
          //       num: '130',
          //       rewardNum: '91080.75855560',
          //       total: '6487.31269600',
          //       yesterdaySum: '0.00000000',
          //     },
          //     communitySum: '6487.31269600',
          //     staticParam: {
          //       num: '65',
          //       todaySum: '13.00000000',
          //       total: '15.00000000',
          //     },
          //     staticSum: '35',
          //     total: '6537.312696',
          //   }
          // }

          let { staticParam } = d
          this.minedTotal = Big(d.total)
            .minus(d.staticSum)
            .minus(d.communitySum)

          d.communitySum = removeZeros(d.communitySum)
          staticParam.todaySum = removeZeros(staticParam.todaySum)
          staticParam.num = removeZeros(staticParam.num)
          staticParam.total = removeZeros(staticParam.total)
          this.s = d
        }
      }
    },
    async onActive() {
      await connect(true)
      // console.log('invite=', this.value)
      var res = await http.post(`/api/user/active?inviteAddress=${this.value}`)
      if (res.code === 200) {
        state.active = true
        this.init()
      }
    },
  },
  components: { BgVue, BoxView },
}
</script>

<style lang="less" scoped>
.trade-page-wrap {
  & > :deep(.BgFixed) {
    background-image: linear-gradient(
      0deg,
      #4691ee 0%,
      #43b3f2 34%,
      #3fd4f6 100%
    );
  }
}
.trade-page {
  .info {
    height: 110px;
    padding: 46px 30px 0 33px;
    text-align: center;

    .t {
      color: #ffc53d;
      // padding: 10px 42px;
      font-size: 18px;

      text-shadow: 1px 2px 0px rgba(10, 2, 4, 0.2);
      white-space: nowrap;
      font-weight: bold;
    }
    .v {
      padding: 6px 0px;
      color: #ffffff;
      font-size: 18px;
      font-weight: bold;
    }
    .s {
      color: #ffffff;
      font-size: 12px;
    }
  }
  .info-wrap {
    display: flex;
    justify-content: center;
    .info {
      width: 158px;
      height: 70px;

      padding: 0;
      padding-top: 15px;
      margin-left: -4px;
      .v {
        padding: 4px 0px;
      }
    }
  }
  .list {
    padding: 80px 30px 0 90px;
    .item {
      color: #ffffff;
      font-size: 18px;
    }
    .t {
      height: 24px;
    }
    .v {
      display: inline-block;
      height: 24px;
      // padding: 0px 6px;

      margin: 4px 0 0;
      color: #f7cc40;
      // background-color: #feae1b;
      // background: linear-gradient(#efc633, #eda122);
      // box-shadow: inset 0px 1px 0px rgb(255 255 255 / 30%),   0 1px 2px rgb(0 0 0 / 15%);
      border-radius: 8px;
    }

    .item + .item {
      margin-top: 32px;
    }
    .item:last-child {
      margin-top: 35px;
    }
  }
}
.wrap {
  :deep(.van-popup) {
    width: 92%;
    background: transparent;
    // background: linear-gradient(136deg, #14181b 100%, #222020 100%);
  }

  .mask-content {
    padding-bottom: 20px;
    // background: linear-gradient(136deg, #14181b 100%, #222020 100%);
  }

  .mask-content-title {
    padding: 20px 0 24px;
    // color: #9c9d9e;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    // font-weight: bold;
  }

  .mask-content-text {
    display: flex;
    align-items: center;
    // color: #fff;
    // color: #9c9d9e;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    // text-shadow: #1f64ca 2px 0 2px, #1f64ca 0 2px 2px, #1f64ca -2px 0 2px,
    //   #1f64ca 0 -2px 2px;
    margin-left: 15px;
    margin-bottom: 20px;
    img {
      margin-right: 10px;
    }
  }

  .mask-content-tip {
    padding: 20px 10px;
    margin: 20px 15px 30px;
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    text-align: left;

    background-color: rgba(63, 129, 221, 0.5);
    border-radius: 10px;
    border: solid 1px rgba(148, 222, 244, 0.5);
  }

  .tip-down {
    text-indent: 21px;
  }

  .van-cell {
    // background: linear-gradient(136deg, #14181b 100%, #222020 100%);
    align-items: center;
    padding: 0;
  }

  .warp-input {
    position: relative;
    margin: 0 15px 0;

    :deep(input) {
      width: 100%;
      height: 44px;
      padding: 0 10px 0 15px;
      // color: #9c9d9e;
      // font-size: 14px;
      // background: #fff;
      // border-radius: 2px;
      // border: 1px solid #9c9d9e;
    }
  }

  .btn-bottom {
    margin: 0 15px;

    :deep(.van-button) {
      color: #ffffff;
      font-size: 21px;
      background-image: linear-gradient(0deg, #e69118 0%, #f5cf1c 100%);
      background-blend-mode: normal, normal;
      border-radius: 24px;
      border: none;
    }

    .text {
      color: #fff;
      font-size: 14px;
      text-align: center;
      margin-top: 10px;
      text-decoration-line: underline;
    }
  }
}
</style>
